<template>
	<div>
		<img :src="'//'+detail.img" alt="">
		<div :class="{
			'detail' : detail.title
		}">
			<div class="title">{{detail.title}}</div>
			<div class="summary">{{detail.summary}}</div>
			<div class="content">{{detail.content}}</div>
			<div class="create-time">{{detail.createTime}}</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment'
	export default {
		data(){
			return {
				detail:{
					id: undefined,
					img: undefined,
					title: undefined,
					summary: undefined,
					content: undefined,
					createTime:undefined
				}
			}
		},
		created(){
			console.log(this.$route.query.id)
			fetch(`/article/detail/${this.$route.query.id}`)
			.then(res=>res.json())
			.then(res=>{
				if(res.status == 200){
					this.detail = res.data
					this.detail.createTime = res.data.createTime ? 
					moment(res.data.createTime).format('YYYY-MM-DD HH:mm:ss'): undefined;
				}else{
					this.$toast.fail(res.errMsg)
				}
			})
		}
	}
</script>

<style scoped>
	.detail{
		text-align: left;
		padding: 20px;
	}
	img{
		width: 100%;
	}
	.detail .title{
		font-size: 25px;
		padding-bottom: 20px;
	}
	.detail .summary{
		padding: 20px;
		background: #dcdcdc;
		margin-bottom: 20px;
	}
	.detail .content{
		padding: 20px;
		text-indent: 2em;
		line-height: 200%;
	}
	.detail .create-time{
		color: #9c9c9c;
		text-align: right;
	}
</style>